<template>
  <div class="grid gap-y-5">
    <el-card>
      <div
        slot="header"
      >
        <span class="text-xl font-bold">牲畜登记</span>
      </div>
      <el-form
        ref="form"
        :model="form.data"
        :rules="form.rule"
        size="medium"
        label-width="7rem"
      >
        <el-row>
          <el-col
            :span="24"
          >
            <el-form-item
              label="种类"
              prop="type"
            >
              <el-select
                v-model="form.data.type"
                placeholder="请选择"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(val,key) in this.$store.state.gtype.atype"
                  :key="key"
                  :label="val"
                  :value="key"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="品种"
              prop="breed"
            >
              <el-select
                v-model="form.data.breed"
                placeholder="请选择"
                :style="{ width: '100%' }"
                :disabled="!form.data.type"
              >
                <el-option
                  v-for="(val,key) in this.$store.state.gtype.breed[form.data.type]"
                  :key="form.data.type+key"
                  :label="val"
                  :value="1000*form.data.type+key"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="饲养员"
              prop="bid"
            >
              <el-input
                v-model="form.data.bid"
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button
        type="primary"
        class="ml-28"
        @click="submit"
      >
        添加
      </el-button>
    </el-card>

    <el-card
      class="collapse"
      :class="collapse.t1.opened ? 'opened' : 'closed'"
    >
      <div
        slot="header"
        @click="toggleColl('t1')"
      >
        <i class="el-icon-arrow-right font-bold" />
        <span class="ml-2 text-xl font-bold">牲畜列表</span>
      </div>
      <el-collapse-transition>
        <div
          v-show="collapse.t1.opened"
        >
          <el-table
            :data="table.data"
            stripe
            style="width: 100%"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-col
                  :span="12"
                  class="mb-2"
                >
                  <div class="text-lg font-bold">
                    饲养方法
                  </div>
                  <div>{{ loadFake(props.row.aid,'feed') }}</div>
                </el-col>

                <el-col
                  :span="12"
                  class="mb-2"
                >
                  <div class="text-lg font-bold">
                    检疫证书
                  </div>
                  <div
                    v-if="loadFake(props.row.aid,'vail')"
                    class="shadow-inner border rounded-md w-64"
                  >
                    <img
                      src="../../assets/animal_vail.jpg"
                      alt=""
                    >
                  </div>
                  <div v-else>
                    暂无
                  </div>
                </el-col>
                <el-col
                  :span="12"
                  class="mb-2"
                >
                  <div class="text-lg font-bold">
                    饲养日志
                  </div>
                  <div v-if="loadFake(props.row.aid,'dairy')">
                    <el-button>查看</el-button>
                  </div>
                  <div v-else>
                    暂无
                  </div>
                </el-col>
                <el-col
                  :span="12"
                  class="mb-2"
                >
                  <div>
                    <a
                      :href="'/#/trace/'+props.row.hash"
                      target="_blank"
                      rel="noopener"
                    >
                      <img
                        :src="props.row.qr"
                        alt=""
                      ></a>
                  </div>
                </el-col>
              </template>
            </el-table-column>
            <el-table-column
              prop="aid"
              label="牲畜编号"
            />
            <el-table-column
              prop="type"
              label="种类"
            />
            <el-table-column
              prop="breed"
              label="品种"
            />
            <el-table-column
              prop="bname"
              label="饲养员"
            />
            <el-table-column
              prop="birth"
              label="登记日期"
            />
            <el-table-column
              prop="state"
              label="状态"
            >
              <template slot-scope="scope">
                <el-tag
                  v-if="scope.row.state===0"
                  size="medium"
                >
                  饲养中
                </el-tag>
                <el-tag
                  v-else-if="scope.row.state===1"
                  size="medium"
                  type="success"
                >
                  已售出
                </el-tag>
                <el-tag
                  v-else-if="scope.row.state===2"
                  type="danger"
                  size="medium"
                >
                  死亡
                </el-tag>
                <el-tag
                  v-else
                  size="medium"
                  type="info"
                >
                  {{ scope.row.state }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-transition>
    </el-card>

    <el-dialog
      :visible.sync="dialog"
      width="30%"
    >
      <div class="flex justify-evenly items-center">
        <div>{{ temp.msg }}</div>
        <div>
          <a
            :href="'/#/trace/' + temp.newHash"
            target="_blank"
            rel="noopener"
          >
            <img
              :src="temp.newQr"
              alt=""
            ></a>
        </div>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="dialog = false"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Hashids from 'hashids'
import QRCode from 'qrcode'

export default {
  data () {
    return {
      hashids: new Hashids(),
      QRCode,
      dialog: false,
      collapse: {
        t1: {
          opened: false,
          state: 0
        }
      },
      form: {
        data: {
          type: undefined,
          breed: undefined,
          bid: undefined
        },
        rule: {
          type: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            }
          ],
          breed: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            }
          ],
          bid: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            }
          ]
        }
      },
      table: {
        data: [{
          type: '加载中'
        }]
      },
      temp: {
        msg: undefined,
        newHash: undefined,
        newQr: undefined
      },
      fake: {
        feed: [
          '饲养方法1',
          '饲养方法2',
          '饲养方法3',
          '饲养方法4',
          '饲养方法5'
        ],
        dairy: [
          false,
          true,
          false,
          true
        ],
        vail: [
          false,
          true,
          true,
          false
        ]
      }
    }
  },
  methods: {
    submit () {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return
        }
        this.axios.post('/api/ent/animal/add', null, {
          headers: {
            token: this.$store.state.ent.token
          },
          params: {
            type: this.form.data.type,
            breed: this.form.data.breed,
            bid: this.form.data.bid
          }
        }).then(function (r) {
          if (r.data.success) {
            this.temp.msg = r.data.msg

            const hash = this.hashids.encode(0, r.data.detail.aid)
            this.temp.newHash = hash

            QRCode.toDataURL(`${location.origin}/#/trace/${hash}`, { errorCorrectionLevel: 'H' }).then(function (url) {
              this.temp.newQr = url
            }.bind(this))

            this.dialog = true
          } else {
            this.$alert(r.data.msg)
          }
        }.bind(this))
      })
    },
    toggleColl (cid) {
      this.collapse[cid].opened = !this.collapse[cid].opened
      this.tryLoadData(cid)
    },
    tryLoadData (cid) {
      if (this.collapse[cid].opened) {
        if (!this.collapse[cid].loaded && !this.collapse[cid].loading) {
          this.collapse[cid].loading = true
          this.axios.get('/api/ent/animal/list', {
            headers: {
              token: this.$store.state.ent.token
            }
          }).then(function (r) {
            this.table.data = r.data.detail
            this.genQR()
          }.bind(this)).finally(function () {
            this.collapse[cid].loaded = true
            this.collapse[cid].loading = false
          }.bind(this))
        }
      }
    },
    loadFake (val, list) {
      const hash = this.hashids.encode(val)
      const first = hash.charCodeAt(0)

      const target = this.fake[list]

      return target[first % target.length]
    },
    genQR () {
      this.table.data.forEach(function (e, i) {
        const hash = this.hashids.encode(0, e.aid)
        this.table.data[i].hash = hash

        QRCode.toDataURL(`${location.origin}/#/trace/${hash}`, { errorCorrectionLevel: 'H' }).then(function (url) {
          this.table.data[i].qr = url
        }.bind(this))
      }.bind(this))
    }
  }
}
</script>
